<template>
	<div class="search">
		<el-input
			v-model.trim="keyWord"
			minlength="11"
			maxlength="11"
			clearable
			prefix-icon="el-icon-search"
			class="!w-[242px]"
			:placeholder="placeholder"
			@clear="search"
			@input="search"
			@blur="isFocus = false"
			@change="handleChange"
			@focus="isFocus = true"
		></el-input>
		<el-button type="text" class="!text-[12px]" @click="show = true">添加会话</el-button>
		<l-dialog v-model="show" title="添加会话" width="458px" @close="handleClose" @formSubmit="handleSubmit" @formClose="handleClose">
			<el-form ref="form" :model="form" :rules="formRules" label-width="85px">
				<el-form-item label="用户ID:" prop="uuid">
					<el-input v-model="form.uuid" placeholder="请输入用户ID" @input="searchPhone"></el-input>
					<div v-if="phone" class="text-[#F14A46]">{{ phone }}</div>
				</el-form-item>
			</el-form>
		</l-dialog>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			keyWord: null,
			show: false,
			form: {
				uuid: null,
			},
			formRules: {
				uuid: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
			},
			phone: null,
			isFocus: false,
		};
	},
	computed: {
		placeholder() {
			return this.isFocus ? null : '请输入用户手机号码查找';
		},
	},
	methods: {
		...mapActions({
			sendMessage: 'ws/send',
			selectSession: 'chat/selectSession',
		}),
		handleChange() {
			this.search();
		},
		search() {
			this.$store.dispatch('chat/search', this.keyWord);
		},
		searchPhone(val) {
			this.$request
				.post('/mall/user/getInfoByUuid', {
					id: val,
				})
				.then((res) => {
					this.phone = res.data ? res.data.mobile : null;
				});
		},
		handleSubmit() {
			this.$refs.form.validate((bool) => {
				if (bool) {
					this.sendMessage(
						JSON.stringify({
							msg: '',
							userId: this.$store.getters.userId,
							nickName: this.$store.getters.kfInfo.name || this.$store.getters.name,
							photo: this.$store.getters.kfInfo.headUrl || this.$store.getters.avatar,
							type: 1,
							msgType: 1,
							joinUserId: this.form.uuid,
							operationType: 4,
							sendTime: this.formatDate(new Date()),
						})
					);
					this.selectSession(+this.form.uuid);
					setTimeout(() => {
						this.handleClose();
					}, 500);
				}
			});
		},
		handleClose() {
			this.$refs.form.resetFields();
			this.show = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.search {
	padding: 19px 17px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f2f2f2;
	::v-deep {
		.el-input__inner {
			border: none;
			background: #f7f7f7;
			font-size: 12px;
		}
	}
}
</style>
